﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>改善简易计算器</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        
        table {
            text-align: center;
            border: 2px solid #ccc;
            border-collapse: collapse;
        }
        
        th,
        td {
            padding: 10px;
        }
        
        input[type="text"],
        input[type="button"] {
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
        }
        
        input[type="button"] {
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        function compute(operator) {
            var num1 = parseFloat(document.getElementById('txtNum1').value);
            var num2 = parseFloat(document.getElementById('txtNum2').value);
            var result = 0;

            switch (operator) {
                case '+':
                    result = num1 + num2;
                    break;
                case '-':
                    result = num1 - num2;
                    break;
                case '*':
                    result = num1 * num2;
                    break;
                case '/':
                    if (num2 !== 0) {
                        result = num1 / num2;
                    } else {
                        alert("除数不能为0！");
                    }
                    break;
                default:
                    break;
            }

            document.getElementById('txtResult').value = result;
        }
    </script>
</head>

<body>
    <form action="" method="post" id="myform" name="myform">
        <table border="0">
            <tr>
                <td><img src="images/shop.gif" width="54" height="54"></td>
                <td colspan="3">
                    <h2>Lazily简易计算器</h2>
                </td>
            </tr>
            <tr>
                <td>第一个数</td>
                <td colspan="3">
                    <input name="txtNum1" type="text" id="txtNum1" size="25">
                </td>
            </tr>
            <tr>
                <td>第二个数</td>
                <td colspan="3">
                    <input name="txtNum2" type="text" id="txtNum2" size="25">
                </td>
            </tr>
            <tr>
                <td>
                    <input name="addButton2" type="button" id="addButton2" value="  ＋  " onClick="compute('+')">
                </td>
                <td>
                    <input name="subButton2" type="button" id="subButton2" value="  －  " onClick="compute('-')">
                </td>
                <td>
                    <input name="mulButton2" type="button" id="mulButton2" value="  ×  " onClick="compute('*')">
                </td>
                <td>
                    <input name="divButton2" type="button" id="divButton2" value="  ÷  " onClick="compute('/')">
                </td>
            </tr>
            <tr>
                <td>计算结果</td>
                <td colspan="3">
                    <input name="txtResult" type="text" id="txtResult" size="25">
                </td>
            </tr>
        </table>
    </form>
</body>

</html>